<template>
  <div class="home">
     <!-- <my-input v-model="msg"></my-input> -->
     
     <!-- <input type="text" v-model="msg">  -->
     <!-- 完全相等 v-model="msg" === :value="msg" @input="inputFtn"-->
     <!-- <input type="text" :value="msg" @input="inputFtn"> -->
     <!-- input 只要输入的值有变话，就会触发 -->
     <!-- change 当输入完成之后，失去焦点，值发生了改变才会触发 -->
     <div>{{msg}}</div>
     <!-- v-model 绑定表单元素（input，checkbox ...）的 -->



     <my-input v-model:message="msg"></my-input>
     <!-- <my-input :value="msg" @input="inputFtn"></my-input> -->
  </div>
</template>
<script>
import MyInput from '../components/myInput'
import { ref } from 'vue';
export default {
  name: 'HomeView',
  components: {
    MyInput
  },
  setup(props) {
    const msg = ref('小明');

    const inputFtn = (e) => { // e 事件对象
       msg.value = e.target.value;
    }
    return {
      msg,
      inputFtn
    }
  }
}
</script>
